<template>
    <div class="class-bed-manage">
      <!-- 顶部按钮 -->
      <div class="operation-bar">
        <el-button type="primary" @click="handleAdd">添加</el-button>
      </div>
  
      <!-- 表格 -->
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="id" width="80" />
        <el-table-column prop="groupName" label="人员分组" />
        <el-table-column prop="beds" label="床位" />
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="text" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="text" style="color: red" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
  
      <!-- 新增/编辑弹窗 -->
      <el-dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
        <el-form :model="form" ref="form" :rules="rules" label-width="100px">
          <el-form-item label="班次分组" prop="groupName">
            <el-select v-model="form.groupName" placeholder="请选择班次分组" style="width: 100%">
              <el-option label="1组" value="1组" />
              <el-option label="2组" value="2组" />
              <el-option label="3组" value="3组" />
            </el-select>
          </el-form-item>
          <el-form-item label="管床床位">
            <div class="bed-grid">
              <div v-for="(row, rowIndex) in 4" :key="'row' + rowIndex" class="bed-row">
                <div v-for="(col, colIndex) in 6" :key="'col' + colIndex" class="bed-item">
                  <el-checkbox 
                    v-model="form.selectedBeds[`${rowIndex * 6 + colIndex + 1}`]"
                    :label="rowIndex * 6 + colIndex + 1"
                  >
                    {{ rowIndex * 6 + colIndex + 1 }}床
                  </el-checkbox>
                </div>
              </div>
            </div>
          </el-form-item>
        </el-form>
        <div slot="footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </div>
      </el-dialog>
    </div>
  </template>
  
  <script>
  export default {
    name: 'ClassBedManage',
    data() {
      return {
        tableData: [],
        dialogVisible: false,
        dialogTitle: '新增管床班次',
        form: {
          id: null,
          groupName: '',
          selectedBeds: {}
        },
        rules: {
          groupName: [
            { required: true, message: '请选择班次分组', trigger: 'change' }
          ]
        }
      }
    },
    created() {
      // 从 localStorage 获取保存的数据
      const savedData = localStorage.getItem('bedManageData')
      if (savedData) {
        this.tableData = JSON.parse(savedData)
      }
    },
    methods: {
      // 保存数据到 localStorage
      saveToLocalStorage() {
        localStorage.setItem('bedManageData', JSON.stringify(this.tableData))
      },
  
      // 打开新增弹窗
      handleAdd() {
        this.dialogTitle = '新增管床班次'
        this.form = {
          id: null,
          groupName: '',
          selectedBeds: {}
        }
        this.dialogVisible = true
      },
  
      // 打开编辑弹窗
      handleEdit(row) {
        this.dialogTitle = '编辑管床班次'
        // 将床位字符串转换为选中状态
        const selectedBeds = {}
        const bedArray = row.beds.split(',')
        bedArray.forEach(bed => {
          const bedNumber = bed.replace('床', '')
          if (bedNumber) {
            selectedBeds[bedNumber] = true
          }
        })
        
        this.form = {
          id: row.id,
          groupName: row.groupName,
          selectedBeds
        }
        this.dialogVisible = true
      },
  
      // 删除
      handleDelete(row) {
        this.$confirm('确认删除该管床班次吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const index = this.tableData.findIndex(item => item.id === row.id)
          if (index > -1) {
            this.tableData.splice(index, 1)
            this.saveToLocalStorage() // 保存删除后的数据
          }
          this.$message.success('删除成功')
        }).catch(() => {})
      },
  
      // 提交表单
      handleSubmit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            // 将选中的床位转换为字符串
            const selectedBedNumbers = Object.keys(this.form.selectedBeds)
              .filter(key => this.form.selectedBeds[key])
              .map(bed => `${bed}床`)
            
            const formData = {
              id: this.form.id || this.tableData.length + 1,
              groupName: this.form.groupName,
              beds: selectedBedNumbers.join(',')
            }
  
            if (this.form.id) {
              // 编辑
              const index = this.tableData.findIndex(item => item.id === this.form.id)
              if (index > -1) {
                this.tableData.splice(index, 1, formData)
              }
            } else {
              // 新增
              this.tableData.push(formData)
            }
  
            this.saveToLocalStorage() // 保存更新后的数据
            this.dialogVisible = false
            this.$message.success(this.form.id ? '编辑成功' : '添加成功')
          }
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .class-bed-manage {
    padding: 20px;
  
    .operation-bar {
      margin-bottom: 20px;
    }
  
    .bed-grid {
      border: 1px solid #EBEEF5;
      padding: 10px;
      border-radius: 4px;
  
      .bed-row {
        display: flex;
        margin-bottom: 10px;
  
        &:last-child {
          margin-bottom: 0;
        }
      }
  
      .bed-item {
        flex: 1;
        text-align: center;
        
        .el-checkbox {
          margin-right: 0;
        }
      }
    }
  }
  </style>